<template>
  <ele-pro-table
      ref="table"
      :where="where"
      :datasource="url"
      :columns="columns"
      need-page
      height="calc(100vh - 360px)">
    <template slot="module">
      {{ data.module }}
    </template>
    <template slot="level">
      <el-tag v-if="data.level === 1" type="success" size="small">一级</el-tag>
      <el-tag v-if="data.level === 2" type="success" size="small">二级</el-tag>
    </template>
    <template slot="name">
      {{ data.name }}
    </template>
    <template slot="cycle" slot-scope="{row}">
      <el-select v-if="form.id === row.id" v-model="form.cycle" filterable class="ele-fluid">
        <el-option v-for="item in cycleOption" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
      <template v-else>{{ cycleOption[row.cycle - 1].name }}</template>
    </template>
    <template slot="compare" slot-scope="{row}">
      <el-select v-if="form.id === row.id" v-model="form.compare" filterable class="ele-fluid">
        <el-option v-for="item in compareOption" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
      <template v-else>{{ compareOption[row.compare - 1].name }}</template>
    </template>
    <template slot="condition" slot-scope="{row}">
      <template v-if="form.id === row.id">
        <el-input v-if="form.compare !== 6" v-model="form.condition" type="number" min="0" max="100"/>
        <div v-else style="display: flex;align-items: center">
          <el-input v-model="form.condition[0]" type="number" min="0" max="100"/>
          -
          <el-input v-model="form.condition[1]" type="number" min="0" max="100"/>
        </div>
      </template>
      <template v-else>{{ row.condition }}</template>
    </template>
    <template slot="feedback" slot-scope="{row}">
      <el-input v-if="form.id === row.id" v-model="form.feedback" :rows="2" clearable  type="textarea" :maxlength="100"/>
      <template v-else>{{ row.feedback }}</template>
    </template>
    <template slot="action" slot-scope="{row}">
      <el-button v-if="form.id === row.id" :loading="loading" type="primary" size="mini" @click="save">保存</el-button>
      <template v-else>
        <el-link type="primary" :underline="false" @click="edit(row)">修改</el-link>
        <el-popconfirm class="ele-action" title="确定要删除此规则吗？" @confirm="remove(row)">
          <el-link slot="reference" type="danger" :underline="false" icon="el-icon-delete">删除</el-link>
        </el-popconfirm>
      </template>
    </template>
  </ele-pro-table>
</template>

<script>

export default {
  props: {
    visible: Boolean,
    data: Object
  },
  data() {
    return {
      url: '/early_warning/list',
      where: {},
      columns: [
        {
          type: 'index',
          label: '序号',
          width: 60,
          fixed: 'left',
          align: 'center',
        }, {
          slot: 'module',
          label: '模块',
          width: 100,
          align: 'center',
        }, {
          slot: 'level',
          label: '类型等级',
          width: 80,
          align: 'center',
        }, {
          slot: 'name',
          label: '类型名称',
          width: 120,
          align: 'center',
        }, {
          slot: 'cycle',
          label: '维度',
          width: 120,
          align: 'center',
        }, {
          slot: 'compare',
          label: '计算',
          width: 100,
          align: 'center',
        }, {
          slot: 'condition',
          label: '条件',
          width: 160,
          align: 'center',
        }, {
          slot: 'feedback',
          label: '反馈',
          minWidth: 120,
          align: 'center',
        }
      ]
    }
  },
  methods: {
    updateVisible(value) {
      this.$emit('update:visible', value)
    }
  }
}
</script>

<style scoped>
</style>
